<template>
	<m-layout gap="24" :title="title">
		<m-block class="flex-1" bgColor="unset">
			<template v-for="(item, index) in listArr">
				<m-block gap="30 30" spa="0 0 16 0" class="dataList">
					<view class="h1 flex-between">
						<view class="left">
							<view class="flex">
								<view class="flex-column">
									<text class="fs30">{{ item.month }}</text>
								</view>
							</view>
						</view>
						<view class="fs26">
							<text>总业绩：</text>
							<text>{{ Number(item.amtTeam) + Number(item.amtSelf) }}</text>
						</view>
					</view>
					<view class="content">
						<view class="content-1 flex-between">
							<view class="dl">
								<view class="dt">个人业绩</view>
								<view class="dd">
									<m-number :value="item.amtSelf" color="#333" weight="600" size="26"></m-number>
								</view>
							</view>

							<m-image src="../../../static/images/pages/c2c/border-icon.png" :size="[3, 100]"></m-image>
							<view class="dl">
								<view class="dt">团队业绩</view>
								<view class="dd">
									<m-number :value="item.amtTeam" color="#333" weight="600" size="26" />
								</view>
							</view>
						</view>
					</view>
				</m-block>
			</template>
			<m-loading :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount"></m-loading>
		</m-block>
	</m-layout>
</template>

<script>
import { mapState } from 'vuex';
import { mytotalDay_dls } from '../../../api/Users.js';
export default {
	name: '',
	data() {
		return {
			title: '',
			scrollTop: 0,
			listArr: [], // 列表
			pageSize: 20,
			pageIndex: 1,
			pageCount: 1,
			isLoading: true
		};
	},
	computed: {
		...mapState({
			userinfo: (state) => state.user.userinfo
		}),
		dlsEnum() {
			const state = this.$store.state.general.enum;
			return state['Dls'];
		}
	},
	watch: {
		idx(val) {
			this.init();
		}
	},
	onPageScroll({ scrollTop }) {
		this.scrollTop = scrollTop;
	},
	onShow() {
		this.$nextTick(() => {
			this.init();
		});
	},
	onLoad({ name, userid }) {
		this.title = name || '营业厅业绩统计';
		this.userid = userid;
	},
	methods: {
		init() {
			this.pageCount = 1;
			this.pageIndex = 1;
			this.getData();
		},
		// 获取分页数据数据
		async getData() {
			if (this.pageIndex > this.pageCount) return;
			this.isLoading = true;
			const { list, pageCount } = await mytotalDay_dls({
				pageSize: this.pageSize,
				pageIndex: this.pageIndex,
				userid: this.userid
			});
			console.log('list===>', list);
			this.isLoading = false;
			this.pageCount = pageCount;
			if (this.pageIndex <= 1) {
				this.listArr = list;
			} else {
				this.listArr = [...this.listArr, ...list];
			}
			this.pageIndex++;
			uni.stopPullDownRefresh();
		}
	},
	onPullDownRefresh() {
		this.init();
	},
	onReachBottom() {
		this.getData();
		console.log('触底了');
	}
};
</script>

<style lang="scss">
page {
}
.mtYeji {
	border-radius: 20rpx;
	background: url('../../../static/images/pages/reward-center/mytotalBg.png') no-repeat !important;
	background-size: 100% 100%;
}

.head {
	border-radius: 20rpx;
	background: url('../../../static/images/pages/reward-center/bg2.png') no-repeat;
	background-size: 100% 100%;

	.h1 {
		padding: 25rpx 0;

		.dl {
			padding-left: 30rpx;

			.dd {
				color: #fff;
			}
			.dt {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
			}
		}
	}

	.line {
		margin-right: 40rpx;
		display: inline-block;
		width: 1rpx;
		height: 30rpx;
		background: #333333;
		border-radius: 1rpx;
	}

	.h2-box {
		padding: 0 30rpx;
		background: rgba(125, 102, 0, 0.1);
	}

	.h2 {
		padding: 15rpx 0;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;

		.dl {
			text-align: left;
			flex: 1;

			.dt {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #fff;
				padding-bottom: 10rpx;
			}

			.dd {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #423600;
			}
		}

		.dl + .dl {
			padding-left: 40rpx;
			position: relative;

			&::after {
				content: '';
				display: inline-block;
				width: 1rpx;
				height: 30rpx;
				background: #333333;
				border-radius: 1rpx;

				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.h2 + .h2 {
		border-top: 1rpx solid #423600;
	}
}

.content {
	padding: 20rpx 0;

	.content-1 {
		border-radius: 21rpx;
		background: #fbfbfb;
		padding: 6rpx 0;

		.dl {
			flex: 1;
			text-align: center;

			.dt {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.content-1 + .content-1 {
		margin-top: 12rpx;
	}
}

.dataList {
	.h1 {
		.left {
			text {
				padding-left: 10rpx;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.right {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
	}

	.h2 {
		margin: 24rpx 0;
		padding: 22rpx;
		background: #fbfbfb;
		border-radius: 10rpx;

		view {
			text {
				padding-left: 15rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333;
			}
		}
	}

	.h3 {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
}

.dls {
	background: linear-gradient(86deg, #304fff, #304fff);
	border-radius: 40rpx;
	color: #fff;
}
</style>
